<template>
	<view class="good_stuff">
		<!-- 顶部背景图 -->
		<view class="good_stuff_bg"></view>
		<view class="good_stuff_body">
			<u-search placeholder="输入商品名称搜索" v-model="keyword" :show-action="false" height="32"
				@click="handleSearchClick(null)" disabled searchIconColor="#666666"></u-search>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" @refresherrefresh="onRefresh" :refresher-threshold="50"
				@scrolltolower="scrolltolower" class="good_stuff_view">
				<swiper :indicator-dots="true" class="swiper" indicator-active-color="#FF943C">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<u-grid col="5">
							<u-grid-item v-for="(record, i) in item" :index="record?.id" :key="record?.id"
								@click="handleSearchClick(record)">
								<view class="good_stuff_fun">
									<image :src="record?.categoryIcon"></image>
									<text class="grid-text">{{record?.categoryName}}</text>
								</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
				<image src="http://qianxueapplet.suoeryun.com/Illustration.png" class="good_stuff_illustration"
					style="position: relative; top: -13px;"></image>
				<template v-if="dataSouse?.length > 0">
					<view class="good_stuff_item">
						<u-grid col="2">
							<u-grid-item v-for="(item, i) in dataSouse" :key="i+30">
								<goodsCard :item="item"></goodsCard>
							</u-grid-item>
						</u-grid>
					</view>
					<u-loadmore :status="status" @loadmore="scrolltolower" v-if="status !== 'nomore'"></u-loadmore>
				</template>
				<u-empty v-else marginTop="10" text="暂无商品" icon="http://qianxueapplet.suoeryun.com/flwsp.png"></u-empty>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref, unref } from 'vue';
	import goodsCard from '@/components/goodsCard';
	import { xcxList, qxGoodsCategoryList } from '@/config/goodStuff.api';

	const keyword = ref('');
	const pagination = reactive({ pageNo: 1, total: 0, pageSize: 10 });
	const params = ref({ search: '' });
	const status = ref('loadmore');
	const dataSouse = ref([]);
	const triggered = ref(false);
	const scrollTop = ref(0);
	const swiperList = ref();

	onMounted(async () => {
		// 商品分类
		const res = await qxGoodsCategoryList({});
		swiperList.value = datumGroup(res, 10);
		uni.$on('goodStuffLoadData', _ => {
			loadData();
		})
		loadData();
	})

	/**
	 * 加载数据
	 */
	async function loadData() {
		if (pagination.pageNo === 1 && !params.value?.search) {
			dataSouse.value = [];
		}
		status.value = 'loading';
		const res = await xcxList({ ...pagination });
		triggered.value = false;
		pagination.total = res?.total;
		if (params.value?.search) {
			dataSouse.value = res?.records;
		} else {
			dataSouse.value?.push(...res?.records);
		}
		if (unref(dataSouse)?.length < pagination.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}

	/**
	 * 搜索跳转
	 */
	function handleSearchClick(item) {
		uni.$u.route('/pages/goodStuff/goodSearch', {
			title: item ? item?.categoryName : '',
			goodsCategoryId: item ? item?.id : '',
		});
	}

	/**
	 * 滚动到底部操作
	 */
	function scrolltolower() {
		if (unref(dataSouse)?.length < pagination.total && (unref(dataSouse)?.length / pagination.pageSize == pagination.pageNo)) {
			pagination.pageNo++;
			loadData();
		}
	}

	/**
	 * 自定义下拉刷新被触发
	 */
	function onRefresh() {
		triggered.value = true;
		pagination.pageNo = 1;
		loadData();
	}

	function handleSearchChange(value) {
		console.log(value, 'value');
		pagination.pageNo = 1
		params.value.search = value ?? '';
		uni.$u.throttle(loadData, 1000, false)
	}

	/** 将数组分为 n 个一组
	 * @param data 需要操作的数组数据
	 * @param n 多少个为一组(默认4个为一组)
	 * @returns {*[]} 已分好组的数组
	 */
	function datumGroup(data, n = 4) {
		let newArr = [];
		for (let i = 0, j = data.length; i < j; i += n) {
			newArr.push(data.slice(i, i + n));
		}
		return newArr;
	}
</script>

<style lang="scss">
	.good_stuff {
		background-color: #fff;
		height: 100vh;

		.good_stuff_bg {
			height: 24rpx;
			background-color: #FF943C;
		}

		.good_stuff_body {
			position: relative;
			top: -24rpx;
			border-radius: 24rpx 24rpx 0 0;
			padding-top: 36rpx;
			background-color: #fff;

			::v-deep .u-search {
				padding: 0 24rpx;

				.u-search__content__input {
					margin: 0 !important;
				}
			}
		}

		.good_stuff_view {
			height: calc(100vh - 30rpx - 32px - 14rpx);

			.swiper {
				padding-top: 22rpx;
				height: 360rpx;

				.good_stuff_fun {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-top: 36rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						padding-bottom: 18rpx;
					}

					text {
						font-size: 28rpx;
					}
				}
			}

			.good_stuff_illustration {
				height: 134rpx;
				display: block;
				width: 100vw;
			}

			.good_stuff_item {
				padding: 0 20rpx 0 20rpx;
			}
		}
	}
</style>
<style>
	/* #ifdef MP-WEIXIN */
	/* wx-swiper .wx-swiper-dot {
		position: relative;
		bottom: -20rpx;
	} */

	/* #endif */
</style>